<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <!-- 引入vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
    </div>
    <script>
        Vue.config.productionTip = false
        let person = {
            name: "zzzzz1",
            sex: "male"
        }
        //这叫数据代理，数据代理产生的属性名默认不参与遍历，也就是默认不可枚举。
        Object.defineProperty(person, "age",{
            value:18
        });
        //在这里age就默认枚举不到了。
        console.log(Object.keys(person))
        
        Object.defineProperty(person, "age1",{
            value:18,
            //控制属性是否可以被枚举/遍历
            enumerable:true,
            //控制属性是否可以被修改
            writable:true,
            //控制属性是否可以被删除
            configurable:true
        });
        //在这里age1就能枚举到了。
        console.log(Object.keys(person))
        console.log(person)
        let number = 9999999;
        Object.defineProperty(person, "age2",{
            //当age2的属性的值被读取的时候，get函数(getter)被调用并返回
            //get:function(){
            //简写成如下形式
            get(){
                return number
            },
            //当age2的属性的值被写入的时候，set函数(setter)被调用并传入value值
            //set:function(value){
            //简写成如下形式
            set(value){
                number = value * value
            }
        });
        console.log(person)
    </script>    
</body>
</html>